import * as React from 'react';
import {
    Dimensions,
    StyleSheet,
    View,
    TouchableWithoutFeedback,
    ToastAndroid,
} from 'react-native';
import IconItem from './icon-item';
import { IconModel } from './icon-model';

interface IIconContainerProps {
    dataSource: IconModel[]
    onPress(jumpUrl): any
}

class IconContainer extends React.Component<IIconContainerProps>{
    public render() {
        const icon = this.props.dataSource || []
        const { width } = Dimensions.get("window")
        const itemWidth = width / 5
        const iconItem = icon.map((item, index) =>
            <TouchableWithoutFeedback onPress={() => {
                this.props.onPress(item.jumpUrl)
            }}>
                <View style={{ width: itemWidth, alignItems: 'center', marginTop: (index + 1) / 5 > 1 ? 20 : 10 }}>
                    <IconItem iconItem={item} />
                </View>
            </TouchableWithoutFeedback>
        )
        return (
            <View style={styles.container}>
                {iconItem}
            </View>
        )
    }
}

const styles = StyleSheet.create({
    container: {
        display: 'flex',
        flexDirection: 'row',
        flexWrap: 'wrap'
    },
});

export default IconContainer